<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>8.9.1-更新子节点</title>
</head>

<body>
    <div id="app">
        <!-- HTML 页面中，元素的子节点都有哪些情况，如下面的HTML 代码所示 -->
        <!-- 没有子节点 -->
        <div></div>
        <!-- 文本子节点 -->
        <div>Some Text</div>
        <!-- 多个子节点 -->
        <div>
            <p></p>
            <p></p>
        </div>
    </div>
</body>
    <script src="https://unpkg.com/@vue/reactivity@3.0.5/dist/reactivity.global.js"></script>
    <script>

        /**
         * 
         * 为什么要区分子节点的类型呢？
         *  只有子节点的类型是规范化的，才有利于我们编写更新逻辑
         * 
         * 应该设定怎样的规范呢？
         * - 一个元素来说，它的子节点无非有以下三种情况
         *   1. 没有子节点，
         *      此时 vnode.children 的值为 null。
         *   2. 具有文本子节点，
         *      此时 vnode.children 的值为字符串，代表文本的内容。
         *   3. 其他情况，无论是单个元素子节点，还是多个子节点（可能是文本和元素的混合），
         *      都可以用数组来表示。
         * - 一个 vnode 的子节点可能有三种情况，那么当渲染器执行更新时，新旧子节点都分别是三种情况之一
         *   可以总结出更新子节点时全部九种可能
         * - 落实到代码，我们会发现其实并不需要完全覆盖这九种可能
         * */ 

        let vnode = null;

        // 没有子节点
        vnode = {
            type: 'div',
            children: null
        }
        // 文本子节点
        vnode = {
            type: 'div',
            children: 'Some Text'
        }
        // 其他情况，子节点使用数组表示
        vnode = {
            type: 'div',
            children: [
                { type: 'p' },
                'Some Text'
            ]
        }
        
    </script>
    

</html>